import React, { FC } from 'react'
import { TableItemWrap } from '../../../../../components'
import { ItemLabel } from './ItemLabel'
import { ItemAction } from './ItemAction'
import { ItemStatus } from './ItemStatus'
import { InteractiveModel } from '@/api/manager/interactive/interface'
import { tableInteractiveItemCheck } from '@/pages/manager/store.combine'
import { useParamsStore } from '../../../store'

interface TableItemProps {
	rowData: InteractiveModel
	isOdd: boolean
}
export const TableItem: FC<TableItemProps> = ({ rowData, isOdd }) => {
	const handleClick = () => {
		tableInteractiveItemCheck(rowData)
	}
	const { nameWidth, operateWidth, statusWidth } = useParamsStore((state) => state.tableWidth)
	return (
		<TableItemWrap isOdd={isOdd} onClick={handleClick}>
			<ItemLabel propWidth={nameWidth} {...rowData} />
			<ItemAction mcc={rowData.mcc} status={rowData.status} propWidth={operateWidth} />
			<ItemStatus mcc={rowData.mcc} propWidth={statusWidth} />
		</TableItemWrap>
	)
}
